<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules"
             class="cms-form" label-width="162px">
      <el-form-item label="专题名称" class="flex-50" prop="name">
        <el-input v-model="dataInfo.name" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="简称(meta标题)" class="flex-50" prop="">
        <el-input v-model="dataInfo.shortName" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="关键字(meta关键词)" class="flex-50" prop="">
        <el-input v-model="dataInfo.keywords" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="描述(meta描述)" class="flex-100" prop="">
        <el-input v-model="dataInfo.description" class="cms-width" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="跳转地址" class="flex-100" prop="">
        <el-input v-model="dataInfo.topicLinkUrl" class="cms-width" placeholder="http或者https开头网络地址"></el-input>
      </el-form-item>
      <el-form-item label="推荐" class="flex-50" prop="recommend" v-if="false">
        <el-radio-group v-model="dataInfo.recommend">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上架" class="flex-50" prop="">
        <el-radio-group v-model="dataInfo.isDisplay">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排列顺序" class="flex-100" prop="priority">
        <el-input v-model="dataInfo.priority" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="模版" class="flex-50" prop="" v-show="false">
        <el-select class="cms-width" v-model="dataInfo.tplContent">
          <el-option label="默认" value="/WEB-INF/t/cms/www/default/topic/topic_default.html"></el-option>
          <el-option v-for="(item,index) in tplList" :key="index"
                     :label="item"
                     :value="'/WEB-INF/t/cms/www'+item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机封面图" class="flex-50" prop="">
        <cms-upload :src="dataInfo.titleImg" @change="getTitleImg" :isMark="false" uploadPath="images"></cms-upload>
        <span style="color:red">建议上传图片尺寸比例 16:9</span>
      </el-form-item>
      <el-form-item label="手机详情图" class="flex-50" prop="">
        <cms-upload :src="dataInfo.contentImg" @change="getContentImg" :isMark="false" uploadPath="images"></cms-upload>
        <span style="color:red">建议上传图片尺寸：750*340</span>
      </el-form-item>
      <el-form-item label="pc封面图" class="flex-50" prop="">
        <cms-upload :src="dataInfo.pcTitleImg" @change="getPcTitleImg" :isMark="false" uploadPath="images"></cms-upload>
        <span style="color:red">建议上传图片尺寸比例 16:9</span>
      </el-form-item>
      <el-form-item label="pc详情图" class="flex-50" prop="">
        <cms-upload :src="dataInfo.pcContentImg" @change="getPcContentImg" :isMark="false" uploadPath="images"></cms-upload>
        <span style="color:red">建议上传图片尺寸：1200*363</span>
      </el-form-item>
    </el-form>
    <div class="form-footer">
      <el-button type="warning" v-if="isType('save')" @click="add(true)"
                 v-perms="'/topic/save'"
      >提交并继续添加
      </el-button>
      <el-button type="primary" v-if="isType('save')" @click="add(false)"
                 v-perms="'/topic/save'"
      >添加
      </el-button>
      <el-button type="primary" v-if="isType('update')" @click="update()"
                 v-perms="'/topic/update'"
      >修改
      </el-button>
      <el-button type="info" @click="$reset">重置</el-button>
      <span class="gray" v-if="isType('save')">
                  选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
    </div>
  </section>
</template>
<script>
  import axios from "axios";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns],
    data() {
      let required = va.required();
      let number = va.number();
      return {
        rules: {//校验规则
          name: [required],
          priority: [required, number]
        },
        tplList: [],
        treeData: [{
          name: '根频道',
          id: "",
          child: []
        }],
        defaultKeys: [],
        channelProps: {
          label: "name",
          children: "child",
          isLeaf: "hasChild",
          id: "id"
        }
      };
    },
    methods: {
      cancel() {
        this.channelVisble = false;
        this.$refs['channelTree'].setCheckedKeys([]);
      },
      getDataInfo(id) {
        //重写获取表单数据
        let api = this.$api; //API地址
        axios.all([
          axios.post(api.topicGet, {id: id}),
          axios.post(api.topicTplList)
        ]).then(axios.spread((res, tpl) => {
          this.loading = false;
          this.dataInfo = res.body; //将用户数据复制给dataInfo
          this.defaultKeys = res.body.channelIds;
          this.tplList = tpl.body;
          this.$refs["form"].resetFields();
        })).catch(error => {
          this.loading = false;
        });
      },
      getTitleImg(src) {
        this.dataInfo.titleImg = src;
      },
      getContentImg(src) {
        this.dataInfo.contentImg = src;
      },
      getPcTitleImg(src) {
        this.dataInfo.pcTitleImg = src;
      },
      getPcContentImg(src) {
        this.dataInfo.pcContentImg = src;
      },
      add(state) {
        this.dataInfo.channelIds = this.dataInfo.channelIds.join(',');//选中的频道
        this.saveDataInfo(state, this.$api.topicSave, this.dataInfo, "list");
      },
      update() {
        this.dataInfo.channelIds = this.dataInfo.channelIds.join(',');//选中的频道
        this.updateDataInfo(this.$api.topicUpdate, this.dataInfo, "list");
      },
      handleClose(done) {
        done();
      }
    },
    created() {
      //初始获取数据
      this.getDataInfo(this.id);
    }
  };
</script>

<style>
  .dialog .tree-layout {
    min-height: 400px;
    width: 90%;
  }

  .dialog .tree-layout .tree {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
    border-right: 0px solid #d4dde2;
  }

  .el-dialog__body {
    min-height: 450px;
    overflow: auto;
  }

  .red-color {
    color: red;
  }
</style>
